<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax图片上传</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
​
<form id="photoForm" class="form-horizontal">
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">头像：</label>
        <div class="col-sm-10">
            <input type="file" name="photo" onchange="doUpload()"  />
        </div>
    </div>
    <div class="form-group">
        <label for="intro" class="col-sm-2 control-label">阅览</label>
        <div class="col-sm-4">
            <img src="" alt="" id="avatar_url" width="100";height="100">
        </div>
    </div>
    <div class="form-group">
        <label for="intro" class="col-sm-2 control-label">
        <input type="button" value="上传" onclick="doUpload()" />
        </label>
    </div>
​
</form>
​
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' }
    });
    function doUpload() {
        var formData = new FormData($("#photoForm")[0]);
        console.log(formData);
        $.ajax({
            url: "{{url('photo')}}",
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function (returndata) {
                $("#avatar_url").attr('src',returndata);
            },
            error: function (returndata) {
                console.log(returndata);
            }
        });
    }
</script>
​
</body>
</html>